@import "../imports/mixins";

.jw-skin-glow {
    @active-color: #fff;
    @inactive-color: #fff;
    @hover-color: @active-color;
    @progress-color: #fff;
    @buffer-color: #3B3D41;
    @rail-color: #2A2C2E;
    @controlbar-background: fade(#131415, 80%);
    @volume-background: #333;

    @cc-inactive: @buffer-color;
    @cc-active: @active-color;

    @rail-height: .4em;
    @cue-size: .25em;

    @controlbar-height: 2em;

    @nextup-border-radius: 0.3em;
    @nextup-header-background: fade(#131415, 90%);
    @nextup-body-background: darken(@nextup-header-background, 20%);
    @nextup-body-text-color-overflow: darken(#131415, 20%);

    #namespace > .controlbar-height();
    #namespace > .basic-skin-styles(); // Using the above local variables
    #namespace > .touch-flag-skin-styles(); // Using the above local variables
    #namespace > .set-global-color-classes();

    .skin-element-padding();

    .jw-background-color {
        background: fade(#333, 80%);
    }

    &.jw-breakpoint-0 .jw-controlbar {
      height: 2.1em;
    }

    /* For the overlay containers */
    .jw-time-tip,
    .jw-volume-tip,
    .jw-menu,
    .jw-skip {
        border-radius: @ui-padding;
    }

    .jw-volume-tip,
    .jw-menu {
        bottom: .3em;
    }

    /* Playlist title */
    .jw-tooltip-title {
        border-bottom: 1px solid #000;
        background-color: #3B3D41;
    }

    /* Rail/slider styles */
    .jw-rail,
    .jw-buffer,
    .jw-progress {
        border-radius: @ui-corner-round;
    }

    .jw-knob {
        display: none;
    }

    /* Timeline and horizontal volume slider */
    .jw-slider-horizontal {
        background: transparent;

        .jw-cue {
            .vertically-centered-rail-element(@rail-height, @cue-size);

            background-color: #000;
            width: @cue-size;
            height: @cue-size;
            border-radius: 1em;
        }
    }

    /* Volume slider */
    .jw-slider-vertical {
        bottom: 5px;

        .jw-rail {
            background-color: #141516;
        }

        .jw-rail,
        .jw-progress {
            width: .4em;
        }
    }

}
